<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/s/dt/dt-1.10.10,se-1.1.0/datatables.min.css">
	<link rel="stylesheet" type="text/css" href="http://gyrocode.github.io/jquery-datatables-checkboxes/1.0.1/css/dataTables.checkboxes.css">

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script type="text/javascript" src="http://cdn.datatables.net/s/dt/dt-1.10.10,se-1.1.0/datatables.min.js"></script>
	<script type="text/javascript" src="http://gyrocode.github.io/jquery-datatables-checkboxes/1.0.1/js/dataTables.checkboxes.min.js"></script>

	<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/s/dt/dt-1.10.10,se-1.1.0/datatables.min.css">
	<link rel="stylesheet" type="text/css" href="http://gyrocode.github.io/jquery-datatables-checkboxes/1.0.1/css/dataTables.checkboxes.css">
	<style type="text/css">
		table.dataTable.select tbody tr,
		table.dataTable thead th:first-child {
		  cursor: pointer;
		}
	</style>
</head>
<body>
	<table id="example" class="display" cellspacing="0" width="100%">
	   <thead>
	      <tr>
	         <th></th>
	         <th>项目</th>
	         <th>功能点描述</th>
	         <th>接口URL</th>
	         <th>请求方式</th>
	         <th>测试结果</th>
	         <th>返回数据</th>
	      </tr>
	   </thead>
	   <!-- <tfoot>
	      <tr>
	         <th></th>
	         <th>项目</th>
	         <th>功能点描述</th>
	         <th>接口URL</th>
	         <th>请求方式</th>
	         <th>测试结果</th>
	         <th>返回数据</th>
	      </tr>
	   </tfoot> -->
	</table>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script type="text/javascript" src="http://cdn.datatables.net/s/dt/dt-1.10.10,se-1.1.0/datatables.min.js"></script>
	<script type="text/javascript" src="http://gyrocode.github.io/jquery-datatables-checkboxes/1.0.1/js/dataTables.checkboxes.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
   var table = $('#example').DataTable({
      'ajax': '../static/demo.json',
      'columns':[
      	{"data":"input"},
      	{"data":"name"},
    	{"data":"desc"},
    	{"data":"url"},
    	{"data":"way"},
    	{"data":"result"},
    	{"data":"details"}
      ],
      'columnDefs': [
         {
            'targets': 0,
            'checkboxes': {
               'selectRow': true
            }
         }
      ],
      'select': [{
		   'style': 'multi'
	   }]
   });


   // Handle form submission event 
   $('#frm-example').on('submit', function(e){
      var form = this;
      
      var rows_selected = table.column(0).checkboxes.selected();

      // Iterate over all selected checkboxes
      $.each(rows_selected, function(index, rowId){
         // Create a hidden element 
         $(form).append(
             $('<input>')
                .attr('type', 'hidden')
                .attr('name', 'id[]')
                .val(rowId)
         );
      });
   });
});

	</script>
</body>
</html>